import { Table, TableColumnsType, message } from "antd";
import axios from "axios";
import { useEffect, useState } from "react";
const columns: TableColumnsType<any> = [
    {
        title: "ID",
        dataIndex: "id",
        render: (text: any) => <span>{text}</span>,
    },
    {
        title: "名称",
        dataIndex: "name",
        render: (text: any) => <span>{text}</span>,
    },
    {
        title: "类型",
        dataIndex: "type",
        render: (text: any) => <span>{text}</span>,
    },
    {
        title: "数据维度",
        dataIndex: "data_type",
        render: (text: any) => (
            <span>
                {text === '0'
                    ? "零维度"
                    : text === '1'
                    ? "一维度"
                    : text === '2'
                    ? "二维度"
                    : "三维度"}
            </span>
        ),
    },
    {
        title: "描述",
        dataIndex: "description",
        render: (text: any) => <span>{text}</span>,
    },
    {
        title: "更新时间",
        dataIndex: "update_time",
        render: (text: any) => <span>{text}</span>,
    },
    {
        title: "版本",
        dataIndex: "version",
        render: (text: any) => <span>{text}</span>,
    },
];
export default function TableAxios() {
    const [data, setData] = useState([]);
    const [messageApi, contextHolder] = message.useMessage();
    const [pagination, setPagination] = useState({
        total: 0,
        pageSize: 10,
        current: 1,
    });
    useEffect(() => {
        getData();
    }, [pagination.pageSize, pagination.current]);
    // 请求数据
    const getData = () => {
        let param = {
            page: pagination.current,
            pageSize: pagination.pageSize,
        };
        axios
            .post("http://localhost:8000/api/dataList", param)
            .then((res) => {
                if (res.data.code === 200 && res.data.data.list.length) {
                    setData(res.data.data.list);
                    setPagination({
                        ...pagination,
                        total: res.data.data.total,
                    })
                } else {
                    messageApi.open({
                        type: "error",
                        content: "数据获取失败请启动服务器!",
                    });
                }
            })
            .catch((err) => {
                console.log("err", err);
            });
    };

    const changePagination = (page: any, pageSize: any) => {
        setPagination((prevPagination) => ({
            ...prevPagination,
            current: page,
            pageSize: pageSize,
        }));
    };

    return (
        <div>
            {contextHolder}
            <h1>TableAxios</h1>
            <button className="returnButton">
                <a href="/">点击返回主菜单</a>
            </button>
            <p>
                本demo需要启动服务器，该demo实现了分页表格请求。
            </p>
            <Table
                dataSource={data}
                columns={columns}
                pagination={{
                    total: pagination.total,
                    pageSizeOptions: [5, 10, 20, 50, 100],
                    onChange: changePagination,
                    showTotal: (total) => `共${total}条记录 `,
                    position: ["bottomRight"],
                    showSizeChanger: true,
                    showQuickJumper: true,
                }}
            />
        </div>
    );
}
